<template>
  <div id="container">

  </div>
</template>

<script>
import {findAll} from "@/api/email"

export default {
  data(){
    return {
      latitudeAndLongitude:[]
    }
  },
  mounted(){
  this.loadWareHouse();
  },
  methods:{
    async loadWareHouse(){
        const res=await findAll();
        console.log(res);
        const wares=res.data
        this.latitudeAndLongitude=wares.map(obj => [parseFloat(obj.longitude), parseFloat(obj.latitude)])
        console.log(this.latitudeAndLongitude)
        var map = new AMap.Map("container", {resizeEnable: true});
        var infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)});
        for (var i = 0, marker; i < this.latitudeAndLongitude.length; i++) {
        var marker = new AMap.Marker({
            position: this.latitudeAndLongitude[i],
            map: map
        });
        const MyContent='名称:'+wares[i].name+'<br>库存:'+wares[i].inventory+'<br>地址:'+wares[i].address
        marker.content = MyContent;
        marker.on('click', markerClick);
        marker.emit('click', {target: marker});
      }
    function markerClick(e) {
        infoWindow.setContent(e.target.content);
        infoWindow.open(map, e.target.getPosition());
    }
    map.setFitView();
    }
  }
}
</script>

<style>
html,
body,
#container {
  width: 100%;
  height: 100%;
}
</style>